<!DOCTYPE html>
<html>
  <head>
    <title>cssdemo.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		td .b {   
	       color:#00ff00;   
		}  
		th.b {    
	       color:#ff0000;  
	       font-family:黑体;  
	       font-size:20px;  
		}
		/* 一个全局样式，是body .b的简写 */
		.b {  
	       color:#0000ff;  
	       font-size:12px;  
		}
		
		.myTxt {  
	       font-size:50px;         
	       font-family:Arial Black;  
		}  
		.txtRed {  
	       color:red;   
		}  
		.txtOrange {  
	       colorrange;  
		}  
		.txtGreen {  
	       color:green;  
		}  
		.txtBlue {  
	       color:blue;  
		}  
		
		
		/*控制 li 的样式*/   
		.a1 ul li {   
		    color:red;   
		}  
		/*控制class="a1"的div块内，全部连接 a 的样式*/  
		.a1 a {  
		    font-size:20px;  
		}  
		/*控制class="a1"的div块内，一个一个为 class="mylink"的样式*/  
		.a1 .myLink {  
	      	font-size:12px;  
		}  
		/*控制 li 内连接a的样式*/  
		.a1 ul li a {  
		    font-size:40px;  
		}  
		/*控制名 li 内，一个为 class="mylink"的连接的样式 */  
		.a1 ul li .myLink {  
			font-size:60px;  
			font-family:黑体;  
		}  
		/*b1样式*/  
		.b1 {  
	      	color:blue;  
		}  
		/*控制 li 内 b1 的样式*/  
		.a1 ul li .b1 {  
		    color:green;  
		}  
	</style>
  </head>
  
  <body>
	<table>  
       <tr>
          <td><div class="b">第一个类b的类路径是th .b</div></td>   
       </tr>
       <tr>   
          <th class="b">第二个类b的类路径是th.b</td>  
       </tr>
       <tr>   
          <td class="b">第三个类b的类路径是 .b</th>  
       </tr>
	</table>  
	<div class="b">第三个类b的类路径是 .b</div> 
	
	<!-- HTML中复合调用样式类  -->
	<ul>  
       <li class="myTxt txtRed">123</li>  
       <li class="myTxt txtOrange">Text</li>  
       <li class="txtGreen">Text</li>  
       <li class="myTxt txtBlue">Text</li>  
	</ul> 
	
	<!-- CSS+HTML的模块化设计 -->
	<div class="a1">  
      <a href="#">linkText</a>  
      <a href="#" class="myLink">titleText</a>  
      <div class="b1">b11111111</div>  
      <ul>  
          <li>  
              <a href="#">titleText</a>  
              <div class="b1">nameCN</div>  
          </li>  
          <li>  
              <a href="#" class="myLink">titleText</a>  
              <div class="b1">nameCN<span class="c1">nameEN</span></div>  
          </li>  
          <li>titleText</li>  
          <li>titleText</li>  
          <li>titleText</li>  
      </ul>  
	</div>   
  </body>
</html>
